<template>
  <page-meta
    background-color="#ffffff"
    page-style="background-color: #ffffff;min-height:100%"
  >
    <navigation-bar
      front-color="#000000"
      :background-color="'#ffffff'"
    />
  </page-meta>
  <!-- eslint-disable-next-line vue/no-multiple-template-root -->
  <view>
    <!-- 搜索 -->
    <view
      class="x-white-bg x-flexp-row x-pa"
    >
      <view class="x-flex-1 x-mr">
        <u-search
          v-model="keyword"
          shape="round"
          :show-action="false"
          placeholder="请输入城市名进行搜索"
          @change="search"
        />
      </view>
    </view>
    <view class="x-pa">
      <view class="x-bb" />
    </view>

    <!-- 当前城市 -->
    <view
      class="x-fs x-flexp-ai x-mt x-pl x-pr"
      @click="selectCity(city)"
    >
      <view class="x-mr-sm">
        <u-icon
          name="map-fill"
          :color="$xm.theme.uniColorPrimary"
        />
      </view>
      <view class="x-mr-sm x-line-1">
        当前定位城市 {{ city || '定位中' }}
      </view>
    </view>

    <u-index-list
      :index-list="indexList"
      :sticky="false"
      :scroll-top="scrollTop"
    >
      <view
        v-for="(item, index) in citys"
        :key="index"
      >
        <!-- #ifdef APP-NVUE -->
        <!-- <u-index-anchor :text="indexList[index]" /> -->
        <!-- #endif -->
        <u-index-item>
          <!-- #ifndef APP-NVUE -->
          <u-index-anchor
            :text="indexList[index]"
            bg-color="none"
          />
          <!-- #endif -->
          <view
            v-for="(v, i) in item"
            :key="i"
            class="x-pa"
            @click="selectCity(v)"
          >
            {{ v }}
          </view>
        </u-index-item>
      </view>
    </u-index-list>
  </view>
</template>
    
<script>
  import cities from './city.json'
  // let cities = {city: []}
  import { initLocation } from '../location/locations'
  export default {
    data() {
      return {
        theme: this.$x.theme,
        keyword: '',
        locationInfo: {},
        scrollTop: 50,
        indexList: [],
        citys: []
      }
    },
    computed: {
      city() {
        return this.locationInfo.address_component&&this.locationInfo.address_component.city
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onLoad() {
      this.getLocation()
      this.indexList = cities.city.map(v=>v.initial)
      this.citys = cities.city.map(v=>v.list.map(v=>v.name))
    },
    methods: {
      getLocation() {
        initLocation().then(res=>{
          this.locationInfo = res
        })
      },
      selectCity(v) {
        uni.$emit('selectCity', v)
        this.$x.navigator.back()
      },
      search() {
        this.citys = this.citys.map(v=>v.filter(vv=>{
          return !this.keyword||vv.includes(this.keyword)
        }))
      }
    }
  }
    </script>
    
    <style lang="scss" scoped>
    
    </style>